<template>
  <div class="ipt">
    <Myalert :message="msg" :color="alertColor" v-if="isAlertShow" @close-alert="closeAlertFn"></Myalert>
    <input type="text" v-model="value" @focus="search" placeholder="请输入关键词"><span @click="sear" value="value">搜索</span>
  </div>
</template>

<script>

import Myalert from './Myalert.vue';
export default {
  components: {
    Myalert
  },
  name: 'Search',
  data() {
    return {
      value: '',
      msg: "这是xxx弹窗",
      isAlertShow: false,
      alertColor: '#fff',
      songList:[],
      isShowlist: true,
    }
  },
  methods: {
    search() {
      this.$router.replace({ path: '/searchview' }).catch(err => { });
    },
    sear() {
      this.$emit('isShow',{isShowlist:this.isShowlist,songList:this.songList})
      if(this.value.length!=0){
        this.getSearchSong()
      }else{
        this.showAlertFn("输入不能为空",'#fb0201')
      }
    },
    async getSearchSong() {
      try {
        const response = await this.$axios.get(`https://apis.netstart.cn/music/search?keywords=${this.value}`);
        // console.log(response.data.result.songs);
        response.data.result.songs.forEach(element => {
          let {name,artists,id} = element
          // console.log(name,artists);
          let obj = {}
          obj.name = name
          obj.artists = artists
          obj.id = id
          this.songList.push(obj)
        });
      } catch (error) {
        console.error('Error fetching data:', error);
      }
      // console.log(this.songList);
    },

    // 关闭自定义弹窗
    closeAlertFn(value){
      // 检查代码
      // console.log(value)
      this.isAlertShow = value;
    },
    // 显示自定义弹窗
    showAlertFn(message,color="#000"){
      this.msg = message;
      this.isAlertShow = true;
      this.alertColor = color;
    }
  }
}
</script>

<style lang="less" scoped>
.ipt {
  vertical-align: middle;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  border-radius: 5px;

  input {
    height: 100%;
    width: 80%;
    padding: 0 20px;
    margin-left: 10px;
    border-radius: 10px;
    margin-right: 10px;
  }

  span {
    width: 25%;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    height: 100%;
    background-color: #ccbcfe;
    border-radius: 10px;
    margin-right: 10px;
    color: #fff;
    font-size: 20px;
  }
}
</style>